import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Spin, message, Select} from 'antd';
import PubSub from 'pubsub-js';

import request from '@/utils/request';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function QueryCatalog({ visiable, close, status, form, catalogItem }) {
  const { getFieldDecorator } = form;
  const [loading, setLoading] = useState(false);
  const [assTypeMap, setAssType] = useState([]);

  useEffect(() => {
    if (status === 'edit') {
      form.setFieldsValue({ directory_name: catalogItem.name,type: catalogItem.catType==='1'?'':catalogItem.catType, directory_desc: catalogItem.remark });
    }
  }, []);

  useEffect(() => {
    request('pmc/pms/StaticDataController/getStaticAttr.do', {
      data: {
        busiObjNbr: 'RmCatalogue',
        attrNbr: 'type',
      },
    })
      .then(res => {
        setAssType(res);
      })
      .always(() => setLoading(false));
  }, []);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      setLoading(true);
      const objPid = {};
      if (status === 'edit') {
        objPid.directory_pid = catalogItem.pid;
      }
      request('pmc/pms/RuleCfgController/addEditViewDirectory', {
        data: {
          ...value,
          directory_id: status === 'edit' ? catalogItem.id : '',
          action_type: status,
          ...objPid,
        },
      })
        .then(res => {
          if (res.success) {
            message.success(`${status === 'add' ? '新增' : '修改'}目录成功！`);
            PubSub.publish(`ruleConfig_tree.update`);
            close();
          } else {
            message.error(res.errMessage);
          }
        })
        .always(() => {
          setLoading(false);
        });
    });
  };

  return (
    <Modal
      title={status === 'add' ? '新增目录' : '修改目录'}
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Spin spinning={loading}>
        <Form>
          <Form.Item label="目录名称" {...formItemLayout}>
            {getFieldDecorator('directory_name', {
              rules: [
                {
                  required: true,
                  message: '目录名称不能为空',
                },
              ],
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="类型" {...formItemLayout}>
            {getFieldDecorator('type', {
              rules: [
                {
                  required: true,
                  message: '目录类型不能为空',
                },
              ],
            })(
              <Select placeholder="请选择">
                {assTypeMap.map(item => {
                  return (
                    <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                  );
                })}
              </Select>
            )}
          </Form.Item>
          {/* <Form.Item
            label="目录编码"
            {...formItemLayout}
            extra="建议目录编码采用rc+日期+6位流水号，如rc202006240000001"
          >
            {getFieldDecorator('externalCode', {
              rules: [
                {
                  required: true,
                  message: '目录编码',
                },
              ],
            })(<Input placeholder="请输入" />)}
          </Form.Item> */}

          <Form.Item label="目录描述" {...formItemLayout}>
            {getFieldDecorator('directory_desc')(
              <TextArea rows={3} placeholder="请输入描述内容" />
            )}
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create()(QueryCatalog);
